<template>
  <basic-container>
    <avue-skeleton :loading="waiting"
                   avatar
                   :rows="8">
      <avue-title style="margin-bottom: 20px; "
                  :styles="{fontSize: '20px'}"
                  :value="process.name"></avue-title>
      <el-card shadow="never"
               style="margin-top: 20px">
        <avue-form v-if="option && ((option.column && option.column.length > 0) || (option.group && option.group.length > 0))"
                   v-model="form"
                   ref="form"
                   :option="option"
                   :defaults.sync="defaults"
                   @submit="handleSubmit"
                   @error="loading = false"
                   :upload-preview="handleUploadPreview">
        </avue-form>
      </el-card>

      <el-card shadow="never"
               style="margin-top: 20px"
               v-if="showExamForm">
        <wf-examine-form ref="examineForm"
                         :process="process"
                         @user-select="handleUserSelect"></wf-examine-form>
      </el-card>
      <div style="height: 120px;"></div>
      <el-row class="foot-item avue-affix"
              :style="{width: isCollapse? 'calc(100% - 80px)': 'calc(100% - 260px)' }"
              id="avue-view">
        <el-button type="primary"
                   size="medium"
                   v-loading="loading"
                   @click="() => {
                   loading = true;
                   $refs.form.submit()
                 }">发起</el-button>
        <el-button v-if="permission.wf_process_draft"
                   type="success"
                   size="medium"
                   v-loading="loading"
                   @click="handleDraft(process.id, process.formKey, form)">存为草稿</el-button>
      </el-row>
    </avue-skeleton>

    <!-- 人员选择弹窗 -->
    <wf-user-select ref="user-select"
                    :check-type="checkType"
                    :default-checked="defaultChecked"
                    @onConfirm="handleUserSelectConfirm"></wf-user-select>
  </basic-container>
</template>

<script>
import WfExamineForm from './examForm.vue'
import WfUserSelect from './user-select'
import exForm from '../../mixins/ex-form'
import draft from '../../mixins/draft'

export default {
  components: {
    WfUserSelect, WfExamineForm
  },
  mixins: [exForm, draft],
  watch: {
    '$route.params.params': {
      handler(val) {
        if (val) {
          const param = JSON.parse(Buffer.from(val, 'base64').toString())
          const { processId } = param
          if (processId) this.getForm(processId)
        }
      },
      immediate: true
    }
  },
  computed: {
    showExamForm() {
      const { hideComment, hideCopy, hideExamine } = this.process
      return !hideComment || !hideCopy || !hideExamine
    }
  },
  data() {
    return {
      defaults: {},
      form: {},
      option: {},
      process: {},
      loading: false
    }
  },
  methods: {
    getForm(processId) {
      this.getStartForm(processId).then(res => {
        let { process, form, startForm } = res
        this.form.processId = process.id
        if (form) {
          const option = { ...eval('(' + form + ')'), menuBtn: false }
          const { column, group } = option

          const groupArr = []
          const columnArr = this.filterAvueColumn(column, startForm).column
          if (group && group.length > 0) { // 处理group
            group.forEach(gro => {
              gro.column = this.filterAvueColumn(gro.column, startForm).column
              if (gro.column.length > 0) groupArr.push(gro)
            })
          }

          option.column = columnArr
          option.group = groupArr
          this.option = option

          this.tag.label = '发起流程 - ' + process.name

          if (this.permission.wf_process_draft) {
            // 查询是否有草稿箱
            this.initDraft(process.id).then(data => {
              this.$confirm('是否恢复之前保存的草稿？', '提示', {
              }).then(() => {
                this.form = JSON.parse(data)
              }).catch(() => {
              })
            })
          }
        }
        this.waiting = false
      })
    },
    handleSubmit(form, done) {
      this.handleStartProcess(form).then(() => {
        this.$message.success("发起成功")
        done()
        this.handleCloseTag('/plugin/workflow/process/send')
      }).catch(() => {
        this.loading = false
        done()
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.foot-item {
  position: fixed;
  bottom: 0;
  margin-left: -20px;
  // right: 0;
  z-index: 101;
  height: 66px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>